<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">

    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>网络设备统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar"></div>
                    </div>
                </div>
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>网络设备告警统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6 bdr">
                                <div class="row" style="text-align: center;" id="panel-data">

                                </div>
                                <div class="echarts" id="echarts-panel"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row font-bold fs20" style="text-align: center;">
                                    告警分配统计
                                </div>
                                <div class="echarts" id="echarts-pie"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>网络设备告警趋势</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>网络拓扑</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row" style="height: 975px;">
                          <img src="../../img/wl.jpg" alt="" style="width:100%;height:100%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>

    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script src="../../js/handlebars-v3.0.1.js"></script>

    <script id="tpl" type="text/x-handlebars-template">
        {{#with panelData}}
        <div class="col-sm-6">
            <div class="font-bold fs30 panenlTotal" style="color: #009999;">{{total}}</div>总数量
        </div>
        <div class="col-sm-6">
            <div class="font-bold fs30 panelNum" style="color: #d00000;">{{num}}</div>已解决
        </div>
        {{/with}}
    </script>

    <script type="text/javascript">
        $(function () {

            // handlebars引擎模板
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板

            // 柱状图
            var barOption;
            var barChart = echarts.init(document.getElementById("echarts-bar"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/netView/allEquip',
                url: '../../data/view_net/bar.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsBar(response.xAxisData, response.seriesData);
                    barChart.setOption(barOption);
                    $(window).resize(barChart.resize);
                }
            });
            function echartsBar(xAxisData, barData) {
                barOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        height: '90%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 16,
                            formatter: function (params) {  // 分隔x轴文字
                                var newParamsName = "";
                                var paramsNameNumber = params.length;
                                var provideNumber = 2;  //一行显示几个字
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;
                                    }
                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        }
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        barWidth: '40%',
                        data: barData,
                        label: {   // 图形上的文本标签
                            show: true,
                            position: 'insideTop', // 相对位置
                            color: '#fff'
                        },
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                    }]
                };

            };

            // 仪表盘
            var panelOption;
            var panelChart = echarts.init(document.getElementById('echarts-panel'));
            $.ajax({
                // url: 'http://192.168.0.82:8888/netView/warnSolved',
                url: '../../data/view_net/panel.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    // 模板引擎的数据
                    var panelContext = {
                        panelData: {
                            total: response.tota,
                            num: response.used
                        }
                    }
                    var html = template(panelContext); //匹配json内容
                    $("#panel-data").html(html); //输入模板
                    // 仪表盘的数据
                    var panelData = [{ value: response.seriesDATA[0].value }];
                    echartsPanel(panelData);
                    panelChart.setOption(panelOption);
                    $(window).resize(panelChart.resize);
                }
            });
            function echartsPanel(panelData) {
                panelOption = {
                    title: {
                        text: '解决率',
                        bottom: "30%",
                        left: '40%',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    series: [
                        {
                            type: 'gauge', // 系列类型，仪表盘类型
                            title: {    // 仪表盘标题。
                                offsetCenter: [0, "40%"], //相对于仪表盘中心的偏移位置
                                color: "#000",  // 文字的颜色,默认 #333。
                                fontSize: 16,   // 文字的字体大小,默认 15。
                                fontWeight: 'bold'
                            },
                            axisTick: {
                            splitNumber: 2,         // 分隔线之间分割的刻度数,默认 5
                            length: 5,              // 刻度线长。支持相对半径的百分比,默认 8。
                        },
                            splitNumber: 10,        // 仪表盘刻度的分割段数,默认 10
                            detail: {   // 仪表盘详情，用于显示数据
                                formatter: '{value}%',  // 格式化函数或者字符串
                                offsetCenter: [0, "80%"],   // 相对于仪表盘中心的偏移位置
                                fontSize: 16,           // 文字的字体大小
                                color: "#000000"          // 文字的颜色,
                            },
                            radius: "70%", //仪表大小
                            axisLine: { // 仪表盘轴线(轮廓线)相关配置
                                lineStyle: { // 仪表盘轴线样式
                                    width: 12 // 仪表盘轴线宽度
                                }
                            },
                            axisLabel: {    // 刻度标签。
                                distance: 1,    // 标签与刻度线的距离,默认 5。
                                fontSize: 10,   // 刻度的文字字体大小,默认 5。
                            },
                            splitLine: {    // 分隔线样式。
                                length: 20, // 分隔线线长，默认30
                            },
                            pointer: {  // 仪表盘指针。
                                length: "80%",  // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                                width: 5,   // 指针宽度,默认 8。
                            },
                            data: panelData
                        }
                    ]
                };
            };

            // 饼状图
            var pieOption;
            var pieChart = echarts.init(document.getElementById('echarts-pie'));
            $.ajax({
                // url: 'http://192.168.0.82:8888/netView/warnArea',
                url: '../../data/view_net/pie.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsPie(response.legendData, response.seriesData);
                    pieChart.setOption(pieOption);
                    $(window).resize(pieChart.resize);
                }
            });
            function echartsPie(pieName, pieData) {
                pieOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        data: pieName,
                        bottom: 0,
                        itemWidth: 10
                    },
                    series: [{
                        name: '告警类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '45%'],
                        data: pieData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };


            // 折线图
            var lineOption;
            var lineChart = echarts.init(document.getElementById('echarts-line'));
            $.ajax({
                // url: 'http://192.168.0.82:8888/netView/warnLine',
                url: '../../data/view_net/line.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsLine(response.legendData, response.xAxisData, response.seriesData);
                    lineChart.setOption(lineOption);
                    $(window).resize(lineChart.resize);
                }
            });
            function echartsLine(legendData, xAxisData, seriesData) {
                lineOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };
            };

        })
    </script>
</body>

</html>